import React from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import styles from './index.module.scss'

interface TrainingCardProps {
    completionCount: number // 完成次数
    totalTime: number | string // 总共所需时间
    flexibility: string // 周期
    name: string // 训练名称
    imgUrl: string // 图片链接
}

const TrainingCard: React.FC<TrainingCardProps> = ({
    completionCount,
    totalTime,
    flexibility,
    name,
    imgUrl,
}) => {
    return (
        <View className={styles.card}>
            <View className={styles.left}>
                <View className={styles.completionCount}>
                    <Text>完成</Text>
                    <Text>{completionCount}次</Text>
                </View>
                <View className={styles.timeAndflexibility}>
                    <Text className={styles.totalTime}>{totalTime}Min</Text>
                    <Text className={styles.flexibility}>{flexibility}</Text>
                </View>
                <Text className={styles.name}>{name}</Text>
                <View className={styles.button}>现在开始</View>
            </View>
            <View className={styles.right}>
                <Image className={styles.image} src={imgUrl} mode='widthFix' />
            </View>
        </View>
    )
}

export default TrainingCard
